<template>
  <div>
    <div :class="panelType">
      <h3>
        <slot name="title">
          Default Title
        </slot>
      </h3>
    </div>

    <div>
      <slot name="body"></slot>
      <p>
        <slot name="category"></slot>
      </p>
    </div>

    <div v-if="hasFooterSlot">
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<script>
import { ref } from 'vue';
export default {
  props: {
    active: true,
    type: {
      type: String,
      default: 'default'
    },
  },
  computed: {
    panelType() {
      return `panel-${this.type}`
    },
    // hasFooterSlot() {
    //   // return this.$slots['footer']
    //   return this.$slots.footer
    //   // return !!this.$slots.footer
    //   // if (this.$slots.footer && this.$slot.footer.length) {
    //   //   return true
    //   // } else {
    //   //   return false
    //   // }
    // }
  },
  setup(props, { slots }) {
    const hasFooterSlot = ref(false)
    if (slots.footer && slots.footer().length) {
      hasFooterSlot.value = true
    }
    return {
      hasFooterSlot
    }
  }
}
</script>
<style lang="">

</style>